<template>
  <div class="order">
    <el-col :span="24">
      <el-card class="order-card1" shadow="hover">
        <template #header>
          <vab-icon icon="shopping-bag-2-line"/>
          物流状态
          <vab-query-form class="card-header-tag">
            <vab-query-form-top-panel>
              <el-form
                :inline="true"
                label-width="80px"
                :model="queryForm"
                @submit.native.prevent
              >
                <el-form-item label="">
                  <el-date-picker
                    clearable
                    v-model="queryForm.searchDate"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    @change="fetchData"
                  />
                </el-form-item>
              </el-form>
            </vab-query-form-top-panel>
          </vab-query-form>
        </template>
        <el-row class="order-card1-content">
          <el-col :span="2">
            <p>总计</p>
            <h1>
              <vab-count
                :decimals="countConfig.decimals"
                :duration="countConfig.duration"
                :end-val="total"
                :prefix="countConfig.prefix"
                :separator="countConfig.separator"
                :start-val="countConfig.startVal"
                :suffix="countConfig.suffix"
              />
            </h1>
          </el-col>
          <el-col :span="2" v-for="(item,key) in list" :key="key">
            <p>{{ item.status.text }}</p>
            <h1 @click="toExpressInfoList(item.customize_express_origin)" style="cursor: pointer;">
              <vab-count
                :decimals="countConfig.decimals"
                :duration="countConfig.duration"
                :end-val="item.count"
                :prefix="countConfig.prefix"
                :separator="countConfig.separator"
                :start-val="countConfig.startVal"
                :suffix="countConfig.suffix"
              />
            </h1>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import VabChart from '@/extra/VabChart'
import VabCount from '@/extra/VabCount'
import _ from 'lodash'
import {getGroupCount} from "@/api/root/express";

export default {
  components: {VabCount, VabChart},
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getGroupCount(this.queryForm).then(res => {
        this.list = res.data.list
        this.total = res.data.total
      })
    },
    toExpressInfoList(customize_express_origin){
      this.$router.push({path: '/expressInfo/orderList', query: {
          customize_express_origin: customize_express_origin,
          searchDate: this.queryForm.searchDate
      }})
    }
  },
  data() {
    const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
    return {
      queryForm:{
        searchDate: [
          '',
          ''
        ],
      },
      countConfig: {
        startVal: 0,
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 3000,
      },
      total: 0,
      list: [],
      initOptions: {
        renderer: 'svg',
      },
    }
  },
}
</script>

<style lang="scss" scoped>
.order {
  &-card1 {
    height: 200px;
    background: linear-gradient(to right, #60b2fb, #6485f6);

    &-content {
      text-align: center;
    }

    ::v-deep {
      .el-card {
        &__header,
        &__body {
          color: $base-color-white !important;
        }
      }
    }
  }
  margin-bottom: $base-margin;
}
</style>
